<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Add Teacher</title>
</h:head>
<f:view>
	<h:body>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<center>
					<h:form>


						<p:panel header="Add Teacher" style="min-height: 550px"
							styleClass="prime_panel">
							<p:growl id="growl" showDetail="true" sticky="false"
								autoUpdate="true" showSummary="false" />
							<center>

								<table border="0" cellpadding="4px" cellspacing="8px">

									<th colspan="2">Personal Information</th>

									<th colspan="2">Job Information</th>
									<tr></tr>
									<tr>
										<td><h:outputText value="Name :" /> <h:outputText
												value="*" style="color:red" /></td>
										<td><p:inputText id="name"
												value="#{teacherBean.teacher.name}" required="true"
												requiredMessage="Please enter Your Name ">
												<f:ajax execute="@this" event="blur" />
											</p:inputText></td>

										<td><h:outputText value="Staff Number :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:inputText id="staffNumber"
												value="#{teacherBean.teacher.staffNumber}" required="true"
												requiredMessage="Please enter Staff Number">
												<f:ajax execute="@this" event="blur" />
											</p:inputText></td>

									</tr>

									<tr>
										<td><h:outputText value="Gender :" />
										</td>
										<td><p:selectOneRadio id="genderOptions"
												value="#{teacherBean.teacher.gender}" style="width:200">
												<f:selectItem itemLabel="Male" itemValue="true" />
												<br />
												<f:selectItem itemLabel="Female" itemValue="false" />
											</p:selectOneRadio></td>

										<td><h:outputText value="Position: " /> <h:outputText
												value="*" style="color:red" /></td>

										<td><p:inputText id="position"
												value="#{teacherBean.teacher.position}" required="true"
												requiredMessage="Please enter Your Position">
												<f:ajax execute="@this" event="blur" />
											</p:inputText></td>
									</tr>

									<tr>
										<td><h:outputText value="SSN / NIC #:" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:inputText id="ssn"
												value="#{teacherBean.teacher.CNIC}" required="true"
												requiredMessage="Please enter Your SSN/NIC Number">
												<f:ajax execute="@this" event="blur" />
											</p:inputText></td>

										<td><h:outputText value="Current Status :" />
										</td>
										<td><p:selectOneRadio id="currentStatus"
												value="#{teacherBean.teacher.currentStatus}"
												style="width:160">
												<f:selectItem itemLabel="Available" itemValue="true" />
												<br />
												<f:selectItem itemLabel="N/A" itemValue="false" />
											</p:selectOneRadio></td>
									</tr>

									<tr>
										<td><h:outputText value="DOB :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:calendar mode="popup"
												value="#{teacherBean.teacher.dob}" navigator="true"
												pattern="dd-MM-yyyy" effect="fadeIn" showButtonPanel="true"
												required="true" requiredMessage="Please enter Date of Birth" />
										</td>

										<td><h:outputText value="Email :" /> <h:outputText
												value="*" style="color:red" />
										</td>


										<td><p:inputText id="email"
												value="#{teacherBean.teacher.user.email}" size="20"
												required="true"
												requiredMessage="Please enter Admin Email Address"
												validatorMessage="Please enter valid email address">
												<f:validateRegex for="email"
													pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"></f:validateRegex>
												<f:ajax execute="@this" event="blur" />
											</p:inputText></td>


									</tr>

									<tr>
										<td><h:outputText value="Present Address :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:inputText id="address"
												value="#{teacherBean.teacher.presentAddress}"
												required="true"
												requiredMessage="Please enter Present Address ">
												<f:ajax execute="@this" event="blur" />
											</p:inputText>
										</td>

										<td><h:outputText value="Password :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:password id="pw1" feedback="true" match="pw2"
												value="#{teacherBean.teacher.user.password}" required="true"
												requiredMessage="Please enter Your Password"
												validatorMessage="Both Passwords should to be match">
												<f:ajax execute="@this" event="blur" />
											</p:password></td>

									</tr>

									<tr>
										<td><h:outputText value="Permanent Address :" />
										</td>
										<td><p:inputText id="permAddress"
												value="#{teacherBean.teacher.permanentAddress}" /></td>

										<td><h:outputText value="Re enter Password :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:password id="pw2" feedback="false">
												<f:ajax execute="@this" event="blur" />
											</p:password></td>


									</tr>

									<tr>
										<td><h:outputText value="Ph. Number :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:inputMask id="ph" mask="+99-9999999999"
												value="#{teacherBean.teacher.phoneNumber}" required="true"
												requiredMessage="Please enter Your Phone Number">
												<f:ajax execute="@this" event="blur" />
											</p:inputMask></td>

										<td><h:outputText value="Mobile Number :" /> <h:outputText
												value="*" style="color:red" />
										</td>
										<td><p:inputMask id="mobileNuumber" mask="+99-9999999999"
												value="#{teacherBean.teacher.mobileNumber}" required="true"
												requiredMessage="Please enter Your Cell Number">
												<f:ajax execute="@this" event="blur" />
											</p:inputMask></td>

									</tr>

									<tr>
										<td></td>
									</tr>
									<tr>
										<td><h:outputLabel>Assign Courses:</h:outputLabel> <h:outputText
												value="*" style="color:red" />
										</td>
									</tr>

									<tr>
										<td />
										<td colspan="3"><p:pickList id="coursesList"
												value="#{teacherBean.courses}" var="course" iconOnly="true"
												itemValue="#{course}" converter="courseConverter"
												required="true"
												requiredMessage="Please enter at least 1 course">

												<f:facet name="sourceCaption">All Courses</f:facet>
												<f:facet name="targetCaption">Assigned Courses</f:facet>

												<p:column>
										           #{course.title}
										        </p:column>

											</p:pickList></td>
									</tr>
									<tr>
										<td></td>
										<td></td>
										<td></td>
										<td style="text-align: right"><p:commandButton
												ajax="false" id="submit" width="30" value="Submit"
												type="submit" action="#{teacherBean.perform}" /></td>
									</tr>
								</table>
							</center>
						</p:panel>
					</h:form>
				</center>
			</ui:define>
		</ui:composition>
	</h:body>
</f:view>
</html>
